<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正方体拖拽旋转放大</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #222;
        overflow: hidden;
      }
      .scene {
        width: 400px;
        height: 400px;
        perspective: 1200px; /* 设置透视距离，让3D效果更真实 */
        position: relative;
        z-index: 1;
      }
      .cube {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-style: preserve-3d; /* 子元素保持3D空间 */
        transform: translate(-50%, -50%) rotateX(-20deg) rotateY(20deg); /* 初始角度 */
        transition: transform 0.3s cubic-bezier(.25,.8,.25,1); /* 平滑动画 */
        cursor: grab;
      }
      .face {
        position: absolute;
        width: 300px;
        height: 300px;
        background-size: cover;
        background-position: center;
        opacity: 0.98;
        border: 2px solid #fff2;
        box-shadow: 0 0 20px #0008;
      }
      .face.front  { transform: rotateY(0deg) translateZ(150px);  background-image: url('static/img/1.png'); }
      .face.back   { transform: rotateY(180deg) translateZ(150px); background-image: url('static/img/2.png'); }
      .face.right  { transform: rotateY(90deg) translateZ(150px);  background-image: url('static/img/3.png'); }
      .face.left   { transform: rotateY(-90deg) translateZ(150px); background-image: url('static/img/4.png'); }
      .face.top    { transform: rotateX(90deg) translateZ(150px);  background-image: url('static/img/5.png'); }
      .face.bottom { transform: rotateX(-90deg) translateZ(150px); background-image: url('static/img/6.png'); }
      .fullscreen-face {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        background-size: cover !important;
        background-position: center !important;
        transition: none !important;
        cursor: pointer;
      }
      .hide-cube {
        opacity: 0;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="cube" id="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
    </div>
    <script>
      const cube = document.getElementById('cube');
      let isDragging = false;
      let lastX, lastY;
      let rotX = -20, rotY = 20;
      let animating = false;
      let fullscreen = false;
      let lastFace = null;

      // 设置立方体的旋转状态
      function setCubeRotation(x, y) {
        cube.style.transform = `translate(-50%, -50%) rotateX(${x}deg) rotateY(${y}deg)`;
      }
      setCubeRotation(rotX, rotY);

      // 鼠标按下事件：开始拖动
      cube.addEventListener('mousedown', (e) => {
        if (fullscreen) return;
        isDragging = true;
        lastX = e.clientX;
        lastY = e.clientY;
        cube.style.cursor = 'grabbing';
      });

      // 鼠标移动事件：实时更新立方体旋转状态
      document.addEventListener('mousemove', (e) => {
        if (!isDragging || fullscreen) return;
        const dx = e.clientX - lastX;
        const dy = e.clientY - lastY;
        rotY += dx * 0.5;
        rotX -= dy * 0.5;
        rotX = Math.max(-90, Math.min(90, rotX)); // 限制上下旋转不超过90度
        setCubeRotation(rotX, rotY);
        lastX = e.clientX;
        lastY = e.clientY;
      });

      // 鼠标释放事件：结束拖动
      document.addEventListener('mouseup', () => {
        if (fullscreen) return;
        isDragging = false;
        cube.style.cursor = 'grab';
      });

      // 计算当前最大的面（用于点击全屏展示）
      function getMaxFace() {
        // 6个面的法向量
        const faces = [
          {name: 'front',  normal: [0, 0, 1]},
          {name: 'back',   normal: [0, 0, -1]},
          {name: 'right',  normal: [1, 0, 0]},
          {name: 'left',   normal: [-1, 0, 0]}, // 修正left面法向量
          {name: 'top',    normal: [0, 1, 0]},
          {name: 'bottom', normal: [0, -1, 0]},
        ];
        // 旋转矩阵
        const rx = rotX * Math.PI / 180;
        const ry = rotY * Math.PI / 180;
        // 先绕Y再绕X
        function rotate(v) {
          let [x, y, z] = v;
          // 绕Y
          let x1 = x * Math.cos(ry) + z * Math.sin(ry);
          let z1 = -x * Math.sin(ry) + z * Math.cos(ry);
          // 绕X
          let y2 = y * Math.cos(rx) - z1 * Math.sin(rx);
          let z2 = y * Math.sin(rx) + z1 * Math.cos(rx);
          return [x1, y2, z2];
        }
        let max = -Infinity, maxFace = null;
        for (let f of faces) {
          let [x, y, z] = rotate(f.normal);
          if (z > max) {
            max = z;
            maxFace = f.name;
          }
        }
        return maxFace;
      }

      // 进入全屏模式
      function showFullscreenFace(faceName) {
        const face = document.querySelector('.face.' + faceName);
        if (!face) return;
        lastFace = faceName;
        face.classList.add('fullscreen-face');
        document.querySelector('.cube').classList.add('hide-cube');
        fullscreen = true;
        // 只在全屏图片上监听点击退出
        face.addEventListener('click', exitFullscreenFace, { once: true });
      }

      // 离开全屏模式
      function exitFullscreenFace() {
        if (!lastFace) return;
        const face = document.querySelector('.face.' + lastFace);
        if (!face) return;
        face.classList.remove('fullscreen-face');
        document.querySelector('.cube').classList.remove('hide-cube');
        fullscreen = false;
        lastFace = null;
      }

      // 点击事件：进入全屏
      cube.addEventListener('click', (e) => {
        if (fullscreen) return;
        const maxFace = getMaxFace();
        showFullscreenFace(maxFace);
      });

      // 移除 document 上的 click 事件监听
      // document.addEventListener('click', (e) => {
      //   if (!fullscreen) return;
      //   exitFullscreenFace();
      // });
    </script>
  </body>
</html>